iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 24
0
Modern Web

用30天了解javascript系列 第 24

[用30天了解javascript]Day24.瀏覽器資料儲存

  • 分享至 

  • xImage
  •  

web storage

  • 是一種可讓網頁將資料儲存於本地端的技術,有兩種儲存方式:local Storage及session Storage
  • 儲存的資料,是以 key-value pair 的形式保存(如同 cookie)
  • 只能儲存字串資料
    https://ithelp.ithome.com.tw/upload/images/20200924/20112053fuvjH4iEBJ.png

打開開發者工具(右鍵 → 檢視) 點application,左邊就可以看到local storage、session storage 資訊

https://ithelp.ithome.com.tw/upload/images/20200924/20112053n1lzM2dF9B.png

存取方法

1.Storage物件的setltem、getltem

setItem(key, value) - 儲存

localStorage.setItem('userName', 'John');

到開發者工具,application的local storage會看到剛新增的一筆資料
https://ithelp.ithome.com.tw/upload/images/20200924/20112053rYLw8U63HZ.png

getItem(key) - 獲取

console.log(localStorage.getItem('userName'));

2.陣列索引

儲存

localStorage['userName'] = "Jay";

讀取

var name = localStorage['userName']

3.屬性

儲存

localStorage.userName = "Jay";

讀取

var name = localStorage.userName

刪除localStorage

removeItem(key, value) - 清除

localStorage.setItem('userName', 'John');
localStorage.setItem('age', '29');
localStorage.setItem('city', 'taipei');
//刪除年齡
console.log(localStorage.removeItem('age'));

claer() - 清除

想刪除全部的資料

localStorage.setItem('userName', 'John');
localStorage.setItem('age', '29');
localStorage.setItem('city', 'taipei');
//一次清除上面三筆
localStorage.clear();

JSON.stringify() 、 JSON.parse() 編譯資料

value只能是字串,因此如果小要儲存json資料,可用 JSON.stringify() 存入 用 JSON.parse() 取回

JSON.stringify() - 將陣列轉為字串

var obj = [
	{ 
		name: "John", 
		age: 29
	}
]
var jsonString = JSON.stringify(obj);
console.log(typeof(jsonString)); //string

JSON.parse() - 將字串轉為陣列

var obj = [
	{ 
		name: "John", 
		age: 29
	}
]
var jsonString = JSON.stringify(obj);
var jsonObj = JSON.parse(jsonString);
console.log(typeof(jsonObj)); //object
console.log(obj[0].name); //John
var userInfo = [
  {name: 'John', 
   city: 'Taipei'
  }
];
//將陣列資料變成字串
var userInfoString = JSON.stringify(userInfo);
console.log(userInfoString);
//儲存
localStorage.setItem('user',userInfoString);
//獲取資料
var getData = localStorage.getItem('user');
console.log(typeof(getData)); //string
//將字串資料轉為陣列
var getDataAry = JSON.parse(getData);
console.log(typeof(getDataAry)); //object
//可以撈出第0筆的name資料
console.log(getDataAry[0].name); //John

上一篇
[用30天了解javascript]Day23.事件
下一篇
[用30天了解javascript]Day25.BOM
系列文
用30天了解javascript30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言